<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			button{
				padding: 20px 45px;
				border: none;
			}
			#d1{
				background: yellow;
			}
			div{
				width: 500px;
				height: 300px;
				line-height: 300px;
				background: yellow;
				text-align: center;
			}
		</style>
		<script>
			$(function(){
				$("#d1").click(function(){
					$("#a1").css("display","block");
					$("#a2").css("display","none");
					$("#a3").css("display","none");
					$("#d1").css("background","yellow");
					$("#d2").css("background","#f0f0f0");
					$("#d3").css("background","#f0f0f0");
				});
			
				$("#d2").click(function(){
					$("#a1").css("display","none");
					$("#a2").css("display","block");
					$("#a3").css("display","none");
					$("#d1").css("background","#f0f0f0");
					$("#d2").css("background","yellow");
					$("#d3").css("background","#f0f0f0");
				});
			
				$("#d3").click(function(){
					$("#a1").css("display","none");
					$("#a2").css("display","none");
					$("#a3").css("display","block");
					$("#d1").css("background","#f0f0f0");
					$("#d2").css("background","#f0f0f0");
					$("#d3").css("background","yellow");
				});
			});
		</script>
	</head>
	<body>
		<button id="d1">按钮1</button>
		<button id="d2">按钮2</button>
		<button id="d3">按钮3</button>
		<div id="a1">
			<p>文本内容1</p>
		</div>
		<div id="a2" style="display: none">
			<p>文本内容2</p>
		</div>
		<div id="a3" style="display: none">
			<p>文本内容3</p>
		</div>
	</body>
</html>